<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="avatar-container">
        <image class="avatar" src="/static/default.png"></image>
        <view class="edit-icon" @click="editAvatar">
          <uni-icons type="compose" size="16" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="user-info">
        <view class="username">
          <text>{{nickname}}</text>
          <uni-icons
              type="compose"
              size="16"
              color="#999"
              @click="editUsername"
          ></uni-icons>
        </view>
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value">98%</text>
            <text class="stat-label">准确率</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">5</text>
            <text class="stat-label">收藏品种</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">12</text>
            <text class="stat-label">学习文章</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-section-title">账号设置</view>
      <view class="menu-item" @click="navigateTo('settings')">
        <view class="menu-icon">
          <uni-icons type="gear" size="20" color="#e74c3c"></uni-icons>
        </view>
        <text class="menu-text">账号设置</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>

      <view class="menu-section-title">安全设置</view>
      <view class="menu-item" @click="navigateTo('favorites')">
        <view class="menu-icon">
          <uni-icons type="star" size="20" color="#f39c12"></uni-icons>
        </view>
        <text class="menu-text">修改密码</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="menu-item" @click="navigateTo('history')">
        <view class="menu-icon">
          <uni-icons type="paperplane" size="20" color="#3498db"></uni-icons>
        </view>
        <text class="menu-text">修改邮箱</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>

      <view class="menu-section-title">其他</view>
      <view class="menu-item" @click="navigateTo('about')">
        <view class="menu-icon">
          <uni-icons type="info" size="20" color="#2ecc71"></uni-icons>
        </view>
        <text class="menu-text">关于我们</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="menu-item" @click="showFeedbackDialog">
        <view class="menu-icon">
          <uni-icons type="help" size="20" color="#9b59b6"></uni-icons>
        </view>
        <text class="menu-text">意见反馈</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="menu-item logout" @click="showLogoutConfirm">
        <view class="menu-icon">
          <uni-icons type="undo" size="20" color="#e74c3c"></uni-icons>
        </view>
        <text class="menu-text">退出登录</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import {useUserStore} from '@/stores/user'

export default {
  computed: {
    isLogin() {
      const userStore = useUserStore()
      return userStore.isLogin
    },
    avatar() {
      const userStore = useUserStore()
      return userStore.avatar
    },
    nickname() {
      const userStore = useUserStore()
      return userStore.nickname
    }
  },
  methods: {
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/my/${page}`
      })
    },
    editAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          uni.showToast({
            title: '头像更新成功',
            icon: 'success'
          })
          // 实际项目中这里应该上传图片到服务器
        }
      })
    },
    editUsername() {
      uni.showModal({
        title: '修改昵称',
        content: '请输入新的昵称',
        editable: true,
        placeholderText: '草莓种植达人',
        success: (res) => {
          if (res.confirm && res.content) {
            uni.showToast({
              title: '昵称更新成功',
              icon: 'success'
            })
          }
        }
      })
    },
    showFeedbackDialog() {
      uni.showModal({
        title: '意见反馈',
        content: '请描述您遇到的问题或建议',
        placeholderText: '请输入反馈内容',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '感谢您的反馈',
              icon: 'success'
            })
          }
        }
      })
    },
    showLogoutConfirm() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const userStore = useUserStore()
              await userStore.logout()
              uni.showToast({
                title: '已退出登录',
                icon: 'success'
              })
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/index/index'
                })
              }, 1500)
            } catch (err) {
              uni.showToast({
                title: '退出登录失败',
                icon: 'none'
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/uni.scss';

.container {
  padding: 20rpx;
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
}

.user-card {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200rpx;
    height: 200rpx;
    // background-image: url('/static/banner/banner1.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
  }
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid rgba($uni-color-strawberry, 0.2);
}

.edit-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: $uni-color-strawberry;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info {
  flex: 1;
}

.username {
  font-size: $uni-font-size-lg;
  color: $uni-text-color;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;

  text {
    margin-right: 10rpx;
  }
}

.user-desc {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  margin-bottom: 20rpx;
}

.user-stats {
  display: flex;
  margin-top: 20rpx;
}

.stat-item {
  flex: 1;
  text-align: center;

  &:not(:last-child) {
    border-right: 1rpx solid $uni-border-color;
  }
}

.stat-value {
  display: block;
  font-size: $uni-font-size-lg;
  color: $uni-color-strawberry;
  font-weight: bold;
}

.stat-label {
  display: block;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  margin-top: 6rpx;
}

.menu-list {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.menu-section-title {
  padding: 20rpx 30rpx;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  background-color: rgba($uni-bg-color-hover, 0.5);
}

.menu-item {
  padding: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid $uni-border-color;

  &:last-child {
    border-bottom: none;
  }

  &.logout {
    margin-top: 20rpx;
    border-top: 1rpx dashed $uni-border-color;
  }
}

.menu-icon {
  width: 44rpx;
  display: flex;
  justify-content: center;
}

.menu-text {
  flex: 1;
  margin-left: 20rpx;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
}
</style>
